
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		li{
			list-style: none;
			display: none;
			position: absolute;
		}
		
		img{
			width:500px;
			height: 300px;

		}
		#box{
			width:500px;
			height: 300px;
			position: relative;
			cursor: pointer;
		}
		#xiaodian{
			position: absolute;
			top:90%;
			left:35%;
		}
		span{
			border-radius: 50%;
			background: pink;
			width: 15px;
			height: 15px;
			float: left;
			text-align: center;
			line-height: 15px;
			margin-left:10px;
		}
		input{
			position: absolute;
			cursor: pointer;
		}
		#left{
			top:50%;
			left:0px;
		}
		#right{
			top:50%;
			left:488px;
		}
	</style>
	<script src="js/jquery-3.1.1.js"></script>
</head>
<body>
	<div id="box">
		<ul>
		<li style="display:block"><img src="img/01.jpg"></li>
		<li><img src="img/02.jpg"></li>
		<li><img src="img/03.jpg"></li>
		<li><img src="img/04.jpg"></li>
		<li><img src="img/05.jpg"></li>
		<li><img src="img/06.jpg"></li>
		<li><img src="img/07.jpg"></li>
		</ul>
		<div id="xiaodian">
			<span style="background:red">1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			<span>5</span>
			<span>6</span>
			<span>7</span>
		</div>
		<input type="button" value="<" id="left">;
		<input type="button" value=">" id="right">;
	</div>
	<script type="text/javascript">

	$(function(){
				var num=0;
				var time=null;
				time=setInterval(move,2000)


				$("#box").bind("mouseover",function(){
					clearInterval(time);
				}).bind("mouseout",function(){
					time=setInterval(move,2000)
				})


				function move(){
					$("li").eq(num).fadeOut(2000);
					num++;
					if(num%7==0){
						num=0;
					}
					$("li").eq(num).fadeIn(2000);
					 $("span").eq(num).css('background', 'red').siblings().css('background', 'pink');
					
				}
				$("span").click(function(){
						num=$(this).index();
						$("li").eq(num).fadeIn().siblings().fadeOut();
						$(this).css('background', 'red').siblings().css('background', 'pink');
					})

				$("#right").bind("click",function(){
					move()
				})

				 $("#left").bind("click", function () {
	            $("li").eq(num).fadeOut(2000);
	            num--;
	            if (num < 0) {
	                num = 6;
	            }
	            $("li").eq(num).fadeIn(2000);
	            $("span").eq(num).css('background', 'red').siblings().css('background', 'pink');
        		});
	})
	</script>
</body>
</html>